<template>
    <van-overlay class="cover" :show="isShow" @click="closeCover">
      <div class="image-box">
        <img src="@/assets/images/share.png" alt="">
      </div>
    </van-overlay>
</template>

<script setup>
  import { ref, watch } from 'vue';

  const props = defineProps({
    show: { type: Boolean, default: false }
  })

  const isShow = ref(props.show);

  watch(() => props.show, (val) => {
    isShow.value = val;  
  })

  const emit = defineEmits([ 'close' ]);

  const closeCover = () => {
    isShow.value = false;
    emit('close');
  }
</script>

<style lang="scss" scoped>
  .cover {
    // background: #fff;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
  }

  .image-box {
    position: absolute;
    right: 3rem;
    width: 30rem;
    height: 30rem;
    top: 1rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

</style> 